<template>
	<view class="body">
		<view class="header">
			<view class="account">
				<!--
				<img v-if="showModal" class="head-icon" @click="handleClickLogin"
					:src="userInfo.avatarUrl || '../../static/personal.png'" alt="" />-->
				<button v-if="checkLogin()" class="avatar-wrapper" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar"
					style="border: none;padding: 0px;;width: 80px;height: 80px; border-radius: 50%;outline: none;border-style: none;">
					<image style="width: 80px; height: 80px; object-fit: cover; object-position: center;" class="avatar"
						:src="avatarUrl"></image>
				</button>
				<div v-else>
					<button class="btn-img"
						style="border: none;width: 80px;height: 80px; border-radius: 50%;outline: none;border-style: none;background-color: transparent;background-size: cover;background-position: center;"
						type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>

					<button class="btn-login"
						style="border: none;outline: none;border-style: none;background-color: transparent;color: #000;font-size: 16px;"
						type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击登录</button>
				</div>

			</view>


		</view>
		<view class="container">
			<view class="content">
				<!-- url="../../pagesPerson/bind/bind" -->
				<view @click="checkId" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/个人信息.png" mode=""></image> -->
						<text class="text_content">学工认证</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</view>
				<view @click="toInfo" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/个人信息.png" mode=""></image> -->
						<text class="text_content">个人信息</text>
					</view>
					<!-- <img class="return" src="../../static/return.png" alt="" /> -->
				</view>

				<!-- <navigator url="" class="item" hover-class="none">
          <view class="item-left">
            <image class="person_image" src="../../static/person/我的订单.png" mode=""></image>
            <text class="text_content">我的订单</text>
          </view>
          <img class="return" src="../../static/return.png" alt="" />
        </navigator> -->
				<navigator url="/pagesPerson/record/record" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/水电记录.png" mode=""></image> -->
						<text class="text_content">使用记录</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</navigator>

				<navigator url="/pagesPerson/faceDetect/faceDetect" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/生物识别.png" mode=""></image> -->
						<text class="text_content">生物识别</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</navigator>

				<navigator url="/pagesPerson/feedback/feedback" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/意见反馈.png" /> -->
						<text class="text_content">意见反馈</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</navigator>
				<navigator url="/pagesPerson/userManual/userManual" class="item" hover-class="none">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/商城_使用说明.png" /> -->
						<text class="text_content">使用说明</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</navigator>
				<view class="item" hover-class="none" v-if="checkLogin()" @click="showLogoutModal">
					<view class="item-left">
						<!-- <image class="person_image" src="../../static/person/退出登录.png" /> -->
						<text class="text_content">退出登录</text>
					</view>
					<img class="return" src="../../static/return.png" alt="" />
				</view>
			</view>

			<!--  <view class="btn">
        注销
      </view> -->

		</view>
	</view>
</template>
<script>

</script>
<style>
	.text_content {
		width: 100px;
		margin-left: 5%;
	}

	.item-left {
		display: flex;
		align-items: center;

	}

	.person_image {
		width: 25px;
		height: 25px;
		z-index: 2;
	}



	.room_id {
		color: #b6b6b6;
		font-size: 18;
		z-index: 2;
		text-align: center;
	}

	.room_name {
		font-size: 15px;
		z-index: 2;
	}


	.body {
		width: 100%;
		height: 100vh;
		background-color: #e3e3e3;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.container {
		width: 100%;
		height: 80%;
		background-color: #fff;
		margin-top: -4%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.header {
		width: 90%;
		height: 40%;

		background-color: #fff;
		border-radius: 3%;
		margin-top: 15%;
		z-index: 2;
		border: 0.1px solid #ececec;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		box-sizing: content-box;
	}

	.head-icon {
		width: 80px;
		height: 80px;
	}

	.account {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btn {
		margin-top: 5%;
		width: 90%;
		height: 40px;
		background-color: #e3e3e3;
		display: flex;
		justify-content: center;
		border-radius: 10px;
		color: #fff;
		align-items: center;
	}

	.content {
		width: 90%;
		height: 80%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: end;

	}

	.item {
		width: 100%;
		height: 10%;
		box-sizing: content-boder;
		padding: 10px 0;
		border-bottom: 0.01px solid #e3e3e3;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: content-box;
	}



	.return {
		width: 15px;
		height: 15px;
		transform: rotate(180deg);
		margin-top: 10px;
	}

	.btn-img {
		background-image: url('../../static/personal.png')
	}

	.btn-login::after {
		border: none;
	}
</style>